<template>
	<view class="rescue-container">
		<view class="blue-background"></view>
		
		<!-- 地图卡片 -->
		<view class="map-card">
			<map
				class="map"
				:latitude="latitude"
				:longitude="longitude"
				:markers="markers"
				show-location
			></map>
		</view>
		
		<!-- 合并救援类型和表单为一个卡片 -->
		<view class="form-card">
			<!-- 救援类型选择 -->
			<view class="rescue-types">
				<view class="type-item" :class="{ active: currentType === 'battery' }" @tap="switchType('battery')">搭电</view>
				<view class="type-item" :class="{ active: currentType === 'tire' }" @tap="switchType('tire')">换胎</view>
				<view class="type-item" :class="{ active: currentType === 'tow' }" @tap="switchType('tow')">拖车</view>
			</view>
			
			<!-- 表单信息 -->
			<view class="form-container">
				<!-- 拖车时显示起点终点 -->
				<template v-if="currentType === 'tow'">
					<view class="form-item">
						<text class="label">起点</text>
						<input type="text" v-model="formData.startPoint" placeholder="河南省焦作市山阳区32号"/>
					</view>
					<view class="form-item">
						<text class="label">终点</text>
						<input type="text" v-model="formData.endPoint" placeholder="山阳区解放路66号"/>
					</view>
				</template>
				
				<!-- 搭电和换胎显示位置 -->
				<template v-else>
					<view class="form-item">
						<text class="label">位置</text>
						<input type="text" v-model="formData.currentLocation" placeholder="河南省焦作市山阳区32号"/>
					</view>
				</template>
				
				<!-- 共同的表单项 -->
				<view class="form-item">
					<text class="label">求助人</text>
					<input type="text" v-model="formData.name" placeholder="张先生"/>
				</view>
				<view class="form-item">
					<text class="label">联系方式</text>
					<input type="text" v-model="formData.phone" placeholder="15523632541"/>
				</view>
				<view class="form-item">
					<text class="label">车牌</text>
					<input type="text" v-model="formData.carNumber" placeholder="豫CJ4321"/>
				</view>
				<view class="form-item description">
					<text class="label">描述</text>
					<textarea v-model="formData.description" :placeholder="getDescriptionPlaceholder()"/>
				</view>
			</view>
			<!-- 呼叫救援按钮 -->
			<view class="rescue-action">
				<button class="rescue-btn" @tap="callRescue">呼叫救援</button>
				<view class="rescue-history" @tap="goToHistory">
					救援记录 <text class="arrow">></text>
				</view>
			</view>
		</view>
		
		
		
		<!-- 底部救援电话 -->
		<view class="emergency-calls">
			<view class="call-item">
				<image src="/static/kun/index/rescue/交通事故 拷贝@2x.png" mode="aspectFit"></image>
				<text>交通事故</text>
				<text>122</text>
			</view>
			<view class="call-item">
				<image src="/static/kun/index/rescue/火警@2x.png" mode="aspectFit"></image>
				<text>火警</text>
				<text>119</text>
			</view>
			<view class="call-item">
				<image src="/static/kun/index/rescue/急救包@2x.png" mode="aspectFit"></image>
				<text>急救中心</text>
				<text>120</text>
			</view>
			<view class="call-item">
				<image src="/static/kun/index/rescue/警察,公安@2x.png" mode="aspectFit"></image>
				<text>公安报警</text>
				<text>110</text>
			</view>
		</view>
		<view class="foot"></view>
		<!-- 添加底部紧急按钮 -->
		<view class="footbut">
			<image class="footimg" src="/static/kun/index/示警@2x.png"></image>
		</view>
		
		<!-- 添加底部导航栏 -->
		<CustomTabbar :current="currentTab" class="tabBar"></CustomTabbar>
	</view>
</template>

<script>
import CustomTabbar from '@/components/custom-tabbar.vue';

export default {
	components: {
		CustomTabbar
	},
	data() {
		return {
			currentTab: 'home', // 当前选中的标签
			latitude: 35.23375,
			longitude: 113.24201,
			markers: [{
				latitude: 35.23375,
				longitude: 113.24201,
				iconPath: '/static/location.png'
			}],
			currentType: 'tow',
			formData: {
				startPoint: '',
				endPoint: '',
				currentLocation: '',
				name: '',
				phone: '',
				carNumber: '',
				description: ''
			}
		}
	},
	methods: {
		switchType(type) {
			this.currentType = type
		},
		callRescue() {
			// 处理救援请求
			uni.showToast({
				title: '救援请求已发送',
				icon: 'success'
			})
		},
		goToHistory() {
			// 跳转到救援记录页面
			uni.navigateTo({
				url: '/pages/index/rescue/rescue-history/rescue-history'
			})
		},
		// 根据不同类型返回不同的描述placeholder
		getDescriptionPlaceholder() {
			const placeholders = {
				battery: '请描述车辆电瓶的具体情况及所需帮助',
				tire: '请描述轮胎的具体损坏情况及所需帮助',
				tow: '请准确描述当前的状况及所需的帮助'
			}
			return placeholders[this.currentType]
		}
	}
}
</script>

<style lang="scss" scoped>
	.foot{
		width: 100%;
		height: 50rpx;
	}
.rescue-container {
	min-height: 100vh;
	background: #f5f5f5;
	position: relative;
	padding: 0 40rpx;
	
	.blue-background {
		position: absolute;
		top: -108rpx;
		left: 0;
		right: 0;
		height: 400rpx;
		background: linear-gradient(135deg, #3887FC, #1B6AE9);
		z-index: 0;
	}
	
	.map-card {
		position: relative;
		background: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
		z-index: 1;
		
		.map {
			width: 100%;
			height: 360rpx;
			border-radius: 8rpx;
			overflow: hidden;
		}
	}
	
	.form-card {
		position: relative;
		z-index: 1;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
		overflow: hidden;
		margin-bottom: 20rpx;
	}
	
	.rescue-types {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #f5f5f5;
		
		.type-item {
			flex: 1;
			text-align: center;
			padding: 20rpx;
			color: #333;
			position: relative;
			
			&.active {
				color: #4080ff;
				font-weight: 500;
				
				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 40%;
					height: 4rpx;
					background: #4080ff;
					border-radius: 4rpx;
				}
			}
		}
	}
	
	.form-container {
		padding: 30rpx;
		
		.form-item {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			
			.label {
				width: 120rpx;
				font-size: 26rpx;
				padding: 8rpx 20rpx;
				background: #50A2FD;
				color: #fff;
				border-radius: 30rpx;
				text-align: center;
			}
			
			input, textarea {
				flex: 1;
				background: #f8f9fc;
				border: none;
				padding: 20rpx;
				border-radius: 12rpx;
				font-size: 28rpx;
				margin-left: 20rpx;
			}
		}
		
		.description {
			align-items: flex-start;
			
			textarea {
				height: 160rpx;
			}
			
			.label {
				margin-top: 10rpx;
			}
		}
	}
	
	.rescue-action {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 20rpx 0;
		
		.rescue-btn {
			width: 550rpx; // 更窄的按钮
			height: 80rpx; // 更小的高度
			line-height: 80rpx; // 文字垂直居中
			background: linear-gradient(135deg, #FF7339, #FF4004);
			color: #fff;
			border-radius: 40rpx;
			font-size: 28rpx; // 更小的字体
			box-shadow: 0 8rpx 16rpx rgba(255,107,53,0.3);
			margin-bottom: 20rpx; // 与下方文字的间距
		}
		
		.rescue-history {
			font-size: 26rpx;
			color: #666;
			display: flex;
			align-items: center;
			
			.arrow {
				margin-left: 4rpx;
				color: #999;
			}
		}
	}
	
	.emergency-calls {
		display: flex;
		justify-content: space-around;
		padding: 30rpx 20rpx;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
		margin-bottom: 180rpx; // 增加底部间距，避免被导航栏遮挡
		
		.call-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			image {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 16rpx;
				padding: 16rpx;
				background: #f8f9fc;
				border-radius: 50%;
			}
			
			text {
				font-size: 24rpx;
				color: #666;
				line-height: 1.5;
				
				&:last-child {
					color: #4080ff;
					font-weight: bold;
					font-size: 28rpx;
					margin-top: 4rpx;
				}
			}
		}
	}
	
	// 添加底部按钮样式
	.footbut {
		width: 120rpx;
		height: 120rpx;
		background: linear-gradient(to bottom right,#FEA14C, #FF480C);
		border-radius: 50%;
		position: fixed;
		bottom: 35rpx;
		left: 315.5rpx;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.footimg {
		position: fixed;
		bottom: 70rpx;
		left: 345rpx;
		width: 60rpx;
		height: 60rpx;
		align-items: center;
		z-index: 1000;
	}

	.tabBar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		z-index: 999;
	}
}
</style>